<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Pizzashop</title>
<link href="<c:url value='/static/css/redmond/jquery-ui-1.9.2.custom.css'/>" type="text/css" rel="stylesheet">
<script src="<c:url value='/static/js/jquery-1.8.3.js'/>"></script>
<script src="<c:url value='/static/js/jquery-ui-1.9.2.custom.js'/>"></script>


<link rel="stylesheet" href="<c:url value='/js/slickgrid/slick.grid.css'/>" type="text/css"/>
<link rel="stylesheet" href="<c:url value='/js/slickgrid/css/smoothness/jquery-ui-1.8.16.custom.css'/>" type="text/css"/>
<link rel="stylesheet" href="<c:url value='/js/slickgrid/css/custom.css'/>" type="text/css"/>
 
<script src="<c:url value='/js/Grid.js'/>"></script> 
<script src="<c:url value='/js/slickgrid/lib/jquery.event.drag-2.2.js'/>"></script>
<script src="<c:url value='/js/slickgrid/slick.core.js'/>"></script>
<script src="<c:url value='/js/slickgrid/slick.remotemodel2.js'/>"></script>
<script src="<c:url value='/js/slickgrid/slick.dataview.js'/>"></script>
<script src="<c:url value='/js/slickgrid/slick.grid.js'/>"></script>

<script src="<c:url value='/js/slickgrid/plugins/slick.rowselectionmodel.js'/>"></script>

</head>
<body>
	<h1>List of All Places</h1>
		 <c:out value="TEST"> Testooo</c:out>
	 
		<c:forEach var="p" items="${places_list}" >
			 
				${p.idPlaces} - ${p.name} - ${p.latitude}.				
			 	
		</c:forEach>
		 
	 <c:forEach var="result" items="${places_list}"> 
								<c:out value="${result.idPlaces}"/>
							 	 
					</c:forEach>
					<br><br><br><br><br><br><br><br>SLICKGRID<br><br><br>
					
					
					
					
					
					
					
					
					
					
					
	
<script>
var grid;
var loader;
//If there is a Sort applied we need to send it every pagination.
var dataUrl = "${pageContext.request.contextPath}/places_list.do";
var isInit = false;
 
 
var columns = [
       {
           id: "idplaces",
           name: "idplaces",
           field: "idplaces", 
           cssClass: "cell-selection"
       },
       {
           id: "name",
           name: "name",
           field: "name", 
           cssClass: "cell-selection"
       }
];

var options = {
  editable: false,
  enableAddRow: false,
   enableCellNavigation: true, 
  forceSyncScrolling: true,
  customScroll: true
 
};

var loadingIndicator = null;
var selectedRows = [];

function initGrid() {
	if (${itemCount} == 0) {
	    jQuery('#ajaxContent').html('<div id="list"><div id="messageHolder"><span>No Data.</span></div></div>');
	    return;
	 }

  loader = new Slick.Data.RemoteModel(parseInt("${itemCount}"), dataUrl, gridId);
  grid = new Slick.Grid("#gridContainer", loader.data, columns, options);
  grid.setSelectionModel(new Slick.RowSelectionModel());
  
  
  grid.onViewportChanged.subscribe(function (e, args) {
    var vp = grid.getViewport();
    
    loader.ensureData(vp.top, vp.bottom, 1);
    loader.setTopRow(vp.top);
    
    var bottom = Math.min(vp.bottom, parseInt("${itemCount}"));
    jQuery("div#pager .pager-current-view").html('Showing <strong>' + (vp.top + 1) + " - " + bottom + '</strong> of <strong>${itemCount}</strong> results');
  }); 
  
  loader.onDataLoading.subscribe(function () {
    if (!loadingIndicator) {
        var $g = jQuery("#gridContainer");
        loadingIndicator = jQuery("<div class='loading-indicator-inline'></div>").appendTo("#pager-loading"); 
    }

    loadingIndicator.show();
  });

  loader.onDataLoaded.subscribe(function (e, args) {	 
    for (var i = args.from; i <= args.to; i++) {
      grid.invalidateRow(i);
    }
 
    if(!isInit) {
    	grid.updateRowCount();
    	isInit = true;
    }
    grid.render();

    loadingIndicator.fadeOut();
    
    var colsWidth = 0;
    jQuery.each(grid.getColumns(), function(index, value) {
        colsWidth += value.width;
    });
    if(colsWidth < 940) {
        grid.autosizeColumns();
    } 
  
  });

  jQuery("#txtScrollToRow").keyup(function (e) {
      if (e.which == 13) {
            if(!isNaN(parseInt(this.value)) && this.value > 0)
            {
            	
            		loader.setTopRow(this.value - 1);
                    grid.scrollRowToTop(this.value - 1);
                
            }
      }
  });
  
  // load the first page
  grid.onViewportChanged.notify();
   
  rowDetails = createRowDetails();
  
  Array.each($$(".slick-header-columns").getElements("span")[0], function(span, index) {
	  span.getParent().set("title", span.get("text"));
  });
 
} 
  
window.addEvent('domready', function(){
    initGrid(); 
    initRowHeader();
});
</script>

<div id="gridContainer" class="ajaxEditMarker"></div> 
<div id="pager">
     <span class="pager-jump-to-page">
         Jump to record <input type="text" id="txtScrollToRow" style="width: 60px; text-align: right;" value="1"/> 
     </span>
     <div id="pager-loading"></div>
     <span class="pager-current-view"></span>
     <div class="clr"></div>
      
</div>
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					</body></html>